import React, {useEffect, useState} from 'react';
import {Breadcrumb, Button, Col, Form, Input, Layout, Row, Space, Drawer} from "antd";
import {useNavigate} from "react-router-dom";
import {Content} from "antd/es/layout/layout";
import Mytable from "../../../pages/Mytable";
import {getSystemsByPage} from '../../../api/system'
import AddUsersBySystemId from '../GrantSystem/AddUsersBySystemId'

function GrantSystem() {
    const navigate = useNavigate()
    const [form] = Form.useForm();
    const [total, setTotal] = useState(0);
    const [id, setId] = useState(0);
    const [data, setData] = useState([]);
    const [visible, setVisible] = useState(false);
    const [page, setPage] = useState({
        "current": 1,
        "pageSize": 10
    })
    const [loading, setLoading] = useState(false);
    const [system, setSystem] = useState({
        "leader": '',
        "system_name": '',
        "system_type": '',
    })
    const pagination = {
        onShowSizeChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        onChange: (current, pageSize) => {
            paginationChange(current, pageSize)
        },
        showSizeChanger: true,
        total,
        current: page.current,
        pageSize: page.pageSize,
        defaultPageSize: 10,
        pageSizeOptions:
            [5, 10, 15, 20]
    }
    const paginationChange = async (current, pageSize) => {
        setPage({
            pageSize,
            current
        })
    }

    useEffect(() => {
        setLoading(true)
        getSystemsByPage({...page, ...system}).then(response => {
            const {records, total} = response.data.data
            setTotal(total)
            setData(records)
            setLoading(false)
        })
    }, [page,system]);

    const columns = [
        {
            title: '系统名称',
            width: '50vh',
            dataIndex: 'system_name',
        },
        {
            title: '系统类型',
            dataIndex: 'system_type',
        },
        {
            title: '项目经理',
            dataIndex: 'leader',
        },
        {
            title: '操作',
            dataIndex: 'repayment',
            render: (_, record) => (<Space>
                <Button type='primary' onClick={() => {
                    setId(record.id)
                    setVisible(true)
                }}>系统授权</Button>
            </Space>)
        }
    ];
    return (
        <Layout style={{padding: '0 24px 24px'}}>
            <Breadcrumb style={{margin: '16px 0'}}>
                <Breadcrumb.Item onClick={() => navigate("/main")}>首頁</Breadcrumb.Item>
                <Breadcrumb.Item>系统编辑</Breadcrumb.Item>
            </Breadcrumb>
            <Content
                className="site-layout-background"
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                }}
            >
                <Form
                    name="basic"
                    autoComplete="off"
                    form={form}
                    style={{
                        marginBottom: '10px'
                    }}
                    onFinish={(values) => {
                        setSystem({...values})
                        setPage({current: 1, pageSize: page.pageSize})
                    }}
                >
                    <Row gutter={24}>
                        <Col span={8}><Form.Item
                            label="系统类型"
                            name='system_type'
                        >
                            <Input/>
                        </Form.Item></Col>

                        <Col span={8}>
                            <Form.Item
                                label="系统名称"
                                name='system_name'
                            >
                                <Input/>
                            </Form.Item></Col>

                        <Col span={8}><Form.Item
                            label="项目经理"
                            name='leader'
                        >
                            <Input/>
                        </Form.Item>
                        </Col>
                    </Row>
                    <Row>
                        <Col
                            span={24}
                            style={{
                                textAlign: 'right',
                            }}
                        >
                            <Space>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button
                                    onClick={async () => {
                                        form.resetFields();
                                        const formValue = await form.validateFields()
                                        setSystem({...system, ...formValue})
                                        setPage({...page,current: 1})
                                    }}
                                >
                                    重置
                                </Button></Space>
                        </Col>
                    </Row>
                </Form>
                <Mytable
                    columns={columns}
                    dataSource={data}
                    pagination={pagination}
                    bordered
                    loading={loading}
                />
                <Drawer
                    title={`授权系统`}
                    placement="right"
                    size={'large'}
                    onClose={()=>{setVisible(false)}}
                    visible={visible}
                >
                    <AddUsersBySystemId id={id}/>
                </Drawer>
            </Content>
        </Layout>
    );
}

export default GrantSystem;